<template>
    <div class="main-page">       
        <el-row>
             <el-col :span="2">
               &nbsp;
            </el-col>
            <el-col :span="17" style="text-align:left;font-size:30px">
                物料管理
            </el-col>
            <el-col :span="2">
                <el-button class="insertButton" @click="dialogFormVisible=true">新建</el-button>
                    <el-dialog title="新增物料" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-row>
                              <el-col :span="24">
                                  <el-form-item label="物料描述" :label-width="formLabelWidth">
                                    <el-input v-model="form.itemDescription" auto-complete="off"></el-input>
                                </el-form-item>
                              </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                            <el-form-item label="物料编码" :label-width="formLabelWidth">
                                <el-input v-model="form.itemCode" auto-complete="off"></el-input>
                            </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="物料单位" :label-width="formLabelWidth">
                                <el-select v-model="form.itemUom" placeholder="请选择物料单位">
                                    <el-option label="米" value="米"></el-option>
                                    <el-option label="平方米" value="平方米"></el-option>
                                    <el-option label="立方米" value="立方米"></el-option>
                                    <el-option label="千克" value="千克"></el-option>
                                    <el-option label="个" value="个"></el-option>
                                    <el-option label="其他" value="其他"></el-option>
                                </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>                      
                        <el-row>
                            <el-col :span="24"> 
                                 <el-form-item label="生效时间从" :label-width="formLabelWidth">
                                    <el-date-picker style="width:180px"
                                        v-model="form.startActiveDate"
                                        type="date"
                                        placeholder="选择日期"
                                        format="yyyy 年 MM 月 dd 日"
                                        value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>                       
                            </el-col>
                        </el-row>  
                       
                        <el-row>
                            <el-col :span="24">  
                                <el-form-item label="生效时间至" :label-width="formLabelWidth">
                                    <el-date-picker style="width:180px"
                                        v-model="form.endActiveDate"
                                        type="date"
                                        placeholder="选择日期"
                                        format="yyyy 年 MM 月 dd 日"
                                        value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>  
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="是否启用" :label-width="formLabelWidth">
                                <el-select v-model="form.enabledFlag" placeholder="请选择是否启用">
                                    <el-option label="启用" value=1></el-option>
                                    <el-option label="不启用" value=0></el-option>
                                </el-select>
                                </el-form-item>  
                            </el-col>
                        </el-row> 
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click=insertItem>确 定</el-button>
                    </div>
                    </el-dialog>

            </el-col>
        </el-row>
       <el-row>
           
           <el-col :span="1">
               &nbsp;
           </el-col>
           <el-col :span="3">
               物料编码
           </el-col>
            <el-col :span="3">
                <el-input v-model="listQuery.itemCode" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="2">
                物料描述
            </el-col>
            <el-col :span="3">
                <el-input v-model="listQuery.itemDescription" placeholder="请输入内容" width="20%"></el-input>
            </el-col>
            <el-col :span="2">
                物料单位
            </el-col>
            <el-col :span="3">
                <el-select v-model="listQuery.itemUom" placeholder="米" @change="select1Change">
                    <el-option
                        v-for="item in uom"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="1">
                &nbsp;&nbsp;
            </el-col>
            <el-col :span="4">
                <el-button clss="resetButton" @click="reset">重置</el-button>
                <el-button type="primary" class="selectButton" @click = "selectItem">查询</el-button>
            </el-col>
        </el-row>
       <el-row>
            <el-col :span="1">
             &nbsp;
           </el-col>
           <el-col :span="3">
            &nbsp;  生效时间从
           </el-col>
            <el-col :span="3">
                <el-date-picker style="width:180px"
                v-model="listQuery.startActiveDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-col>
            <el-col :span="2">
                &nbsp;&nbsp; 生效时间至
            </el-col>
            <el-col :span="3">
                <el-date-picker style="width:180px"
                v-model="listQuery.endActiveDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-col>
            <el-col :span="2">
                是否启用
            </el-col>
            <el-col :span="3">
                <el-select v-model="listQuery.enabledFlag" placeholder="是" @change="select2Change">
                    <el-option
                        v-for="item in enable"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <!-- <el-col :span="4">
                <el-button clss="resetButton" @click="reset">重置</el-button>
                <el-button type="primary" class="selectButton" @click="selectItem">查询</el-button>
            </el-col> -->
        </el-row>


        <div class="resultTable">
            <el-table  :data="resultTable1" border style="width: 100%" height="100%">
                <el-table-column
                fixed
                label="物料编码"
                width="150">
                <template slot-scope="scope">
                    <span>
                        {{scope.row.itemCode}}
                    </span>
                </template>
                </el-table-column>
                <el-table-column
                label="物料描述"
                width="150">
                <template slot-scope="scope">
                    <span>
                        {{scope.row.itemDescription}}
                    </span>
                </template>
                </el-table-column>
                <el-table-column
                label="物料单位"
                width="150">
                <template slot-scope="scope">
                    <span>
                        {{scope.row.itemUom}}
                    </span>
                </template>
                </el-table-column>
                <el-table-column
                prop="startActiveDate"
                label="生效时间从"
                width="150">
                <template slot-scope="scope">
                    <span>
                        {{scope.row.startActiveDate}}
                    </span>
                </template>
                </el-table-column>
                <el-table-column
                prop="endActiveDate"
                label="生效时间至"
                width="150">
                <template slot-scope="scope">
                    <span>
                        {{scope.row.endActiveDate}}
                    </span>
                </template>
                </el-table-column>
                <el-table-column
                prop="enableFlag"
                label="是否启用"
                width="150">
                <template slot-scope="scope">
                    <span>
                        {{scope.row.enableFlag == 0 ? '否': '是'}}
                    </span>
                </template>
                </el-table-column>
                <el-table-column
                fixed="right"
                label="操作"
                width="180">
                <template slot-scope="scope">
                    <el-button @click="handleEditClick(scope.row)">编辑</el-button>
                    <el-button @click="handleDeleteClick(scope.row)">删除</el-button>

                </template>                
                </el-table-column>
            </el-table>
        </div>    
        <el-dialog title="更新物料" :visible.sync="dialogFormVisible1">
                    <el-form :model="updateForm">
                        <el-row>
                              <el-col :span="24">
                                  <el-form-item label="物料描述" :label-width="formLabelWidth">
                                    <!-- <el-input v-model="updateForm.itemDescription" clearable></el-input> -->
                                    <el-input v-model="editDescription" clearable></el-input>
                                </el-form-item>
                              </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                            <el-form-item label="物料编码" :label-width="formLabelWidth">
                                <el-input v-model="editCode"></el-input>
                            </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="物料单位" :label-width="formLabelWidth">
                                <el-select v-model="editUom" placeholder="请选择物料单位">
                                    <el-option label="米" value="米"></el-option>
                                    <el-option label="平方米" value="平方米"></el-option>
                                    <el-option label="立方米" value="立方米"></el-option>
                                    <el-option label="千克" value="千克"></el-option>
                                    <el-option label="个" value="个"></el-option>
                                    <el-option label="其他" value="其他"></el-option>
                                </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>                      
                        <el-row>
                            <el-col :span="24"> 
                                 <el-form-item label="生效时间从" :label-width="formLabelWidth">
                                    <el-date-picker style="width:180px"
                                        v-model="editStartActiveDate"
                                        type="date"
                                        placeholder="选择日期"
                                        format="yyyy 年 MM 月 dd 日"
                                        value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>                       
                            </el-col>
                        </el-row>  
                       
                        <el-row>
                            <el-col :span="24">  
                                <el-form-item label="生效时间至" :label-width="formLabelWidth">
                                    <el-date-picker style="width:180px"
                                        v-model="editEndActiveDate"
                                        type="date"
                                        placeholder="选择日期"
                                        format="yyyy 年 MM 月 dd 日"
                                        value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>  
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="是否启用" :label-width="formLabelWidth">
                                <el-select v-model="editEnabledFlag" placeholder="请选择是否启用">
                                    <el-option label="启用" :value="1"></el-option>
                                    <el-option label="不启用" :value="0"></el-option>
                                </el-select>
                                </el-form-item>  
                            </el-col>
                        </el-row> 
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="updateItem">确 定</el-button>
                    </div>
                    </el-dialog>
   



        <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <!-- v-model="listQuery.pageSize" -->
        <!-- v-model="listQUery.currentPage" -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.currentPage"
            :page-sizes="[1, 5, 10, 20]"
            :page-size="listQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div> 
    </div>
</template>

<script>
import jQuery from 'jquery'

export default {
    data() {

        return {
            dialogFormVisible: false,
            dialogFormVisible1: false,
            editDescription: '',
            editUom: '',
            editStartActiveDate: undefined,
            editCode: '',
            editEnabledFlag: 0,
            editEndActiveDate: undefined,
            editId: 0,
            form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
            },
            formLabelWidth: '120px',
            radio: false,
            select1: undefined,
            select2: undefined,
            uom: [{
            value: '米',
            label: '米'
            }, {
            value: '平方米',
            label: '平方米'
        }, {
            value: '立方米',
            label: '立方米'
        }, {
            value: '千克',
            label: '千克'
        }, {
            value: '个',
            label: '个'
        },{
            value: '其他',
            label: '其他'
        }],
        enable:[
            {
                value: '选项1',
                label: '是'
            },
            {
                value: '选项2',
                label: '否'
            }
        ],
        resultTable1: [],
        startvalue: '',
        endvalue: '',
        inputCode:'',
        inputDescription:'',
        form: {},
        updateForm:{},
        listQuery: {
            pageSize: 2,
            currentPage: 1,
        },
        total: 0,
        }

    },
    methods: {
        selectItem(){
            var that = this;
            jQuery.ajax({
                type: "GET",
                url: "http://localhost:8081/selectItem",
                dataType: 'json',  // 请求方式为jsonp
                data:that.listQuery,
                jsonpCallback: "onBack",    // 自定义回调函数名
                success: function (response) {
                    debugger;
                  that.resultTable1=response.ssmItems;
                  that.total=response.total;
                },
                error: function(response){
                    alert("error");
                }
            });
        },
        insertItem(){
            this.dialogFormVisible=false;
            var that = this;
            jQuery.ajax({
                type: 'post',
                url: "http://localhost:8081/insertItem",
                dataType: 'json', 
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(that.form),
                success: function (response) {
                    // that.form="";
                    alert("添加成功");
                },
                error: function(response){
                    alert("添加失败");
                }
            });
        },
        updateItem(){
            this.updateForm.itemUom=this.editUom;
            this.updateForm.startActiveDate=this.editStartActiveDate;
            this.updateForm.itemDescription=this.editDescription;
            this.updateForm.itemCode=this.editCode;
            this.updateForm.enabledFlag=this.editEnabledFlag;
            this.updateForm.endActiveDate=this.editEndActiveDate;
            this.updateForm.itemId=this.editId;
            var that=this;
            that.dialogFormVisible1=false;
            jQuery.ajax({
                type: 'post',
                url: "http://localhost:8081/updateItem",
                dataType: 'json', 
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(that.updateForm),
                success: function (response) {
                    alert("更新成功");
                },
                error: function(response){
                    alert("更新失败");
                }
            });
        },
        deleteItem(){

        },
        //重置
        reset(){
            this.listQuery.itemCode=undefined;
            this.listQuery.itemDescription=undefined;
            this.listQuery.itemUom=undefined;
            this.listQuery.startActiveDate=undefined;
            this.listQuery.enabledFlag=undefined;
            this.listQuery.endActiveDate=undefined;
        },
        handleEditClick(row) {
            debugger
            this.editDescription = row.itemDescription;
            this.editUom=row.itemUom;
            this.editStartActiveDate=row.startActiveDate;
            this.editCode=row.itemCode;
            this.editEnabledFlag=row.enabledFlag;
            this.editEndActiveDate=row.endActiveDate;
            this.editId=row.itemId;
            this.dialogFormVisible1=true;

        },
        handleDeleteClick(row){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            debugger
            jQuery.ajax({
                type: 'GET',
                url: "http://localhost:8081/deleteItem",
                dataType: 'json', 
                contentType: "application/json;charset=UTF-8",
                data: row,
                success: function (response) {
                    alert("删除成功");
                },
                error: function(response){
                    alert("删除失败");
                }
            });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        },
      select1Change(val) {
        //   alert(val);
      },
      select2Change(val) {
        //   alert(val);
      },
      handleSizeChange(val) {
          this.listQuery.pageSize = val;
          this.selectItem();
      },
      handleCurrentChange(val) {
          this.listQuery.currentPage = val;
          this.selectItem();
      },
    }
    
}
</script>

<style scoped>

.resultTable{
    width: 85%;
    height: 55%;
    position: absolute;
    left: 10%;
    top:30%;
    text-align: center
}
.block{
    position: absolute;
    left:28%;
    bottom: 5%;
}

 .el-row {
    margin-bottom: 20px;
/*     &:last-child {
      margin-bottom: 0;
    } */
  }
  .el-col {
      text-align: center;
      line-height: 35px;
      align-self: center;
    border-radius: 4px;
  }
</style>
